<template>
  <div class="home">
    <h1>Home</h1>
    <el-button type="primary" @click="add">
      <!--      {{$store.state.count}}-->
      {{ count }}
    </el-button>
    <h1>{{ count100 }}</h1>
    <hr />
    <div v-if="articles.length === 0">
      <h2>暂无数据</h2>
    </div>
    <ul v-else>
      <li v-for="(item, index) of articles" :key="index">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";

export default {
  name: "Home",
  computed: {
    ...mapState(["count"]),
    ...mapState("articlesModule", ["articles"]),
    ...mapGetters(["count100"])
    // count() {
    //   return this.$store.state.count
    // }
  },
  created() {
    this.$store.dispatch("articlesModule/getArticlesData");
    // this.$store.dispatch("getArticlesData");
    /*fetch('http://localhost:3000/articles')
      .then(function(response) {
        return response.json();
      })
      .then((myJson) => {
        this.$store.commit('SET_ARTICLES', myJson)
        // console.log(myJson);
      });*/
  },
  methods: {
    add() {
      // this.$store.commit('SET_COUNT', 10)
      this.$store.dispatch("setCount", 10);
    }
  }
};
</script>
